<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security4">
    <head>
        <title layout:title-pattern="$DECORATOR_TITLE | $CONTENT_TITLE" th:text="${applicationName}">Application Name | Page Title</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content=""/><!-- TODO: Add description -->
        <meta name="author" content=""/><!-- TODO: Add author -->

        <!-- Favicon -->
        <link rel="shortcut icon" th:href="@{|/static/favicon.ico|}"/><!-- TODO: Add favicon -->

        <!-- Stylesheets -->
        <th:block th:switch="${applicationEnvironment}">
            <th:block th:case="'production'">
                <!-- Application -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/application.min.css|}" href="../../../resources/stylesheets/application.min.css"/>
            </th:block>
            <th:block th:case="*">
                <!-- Bootstrap -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/bootstrap.css|}" href="../../../bootstrap.css"/>
                <!-- Bootstrap Editable -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/bootstrap-editable.css|}" href="../../../bootstrap-editable.css"/>
                <!-- Font Awesome -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/font-awesome.css|}" href="../../../font-awesome.css"/>
                <!-- Select2 -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/select2.css|}" href="../../../selec2.css"/>
                <!-- Select2 Bootstrap -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/select2-bootstrap.css|}" href="../../../select2-bootstrap.css"/>
                <!-- DataTables -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/datatables.css|}" href="../../../resources/stylesheets/datatables.css"/>
                <!-- DataTables Bootstrap -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/datatables-bootstrap.css|}" href="../../../resources/stylesheets/datatables-bootstrap.css"/>
				<link href="http://cdn.bootcss.com/datatables/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
                <!-- Application Commons -->
                <link rel="stylesheet" th:href="@{|/static/stylesheets/application-commons.css|}" href="../../../../resources/stylesheets/application-commons.css"/>
                <link rel="stylesheet" th:href="@{|/static/stylesheets/carousel.css|}" href="../../../../resources/stylesheets/carousel.css"/>
                <link rel="stylesheet" th:href="@{|/static/stylesheets/main.css|}" href="../../../../resources/stylesheets/main.css"/>
            </th:block>
        </th:block>

        <!-- Layout -->
        <link rel="stylesheet" th:href="@{|/static/stylesheets/layouts/layout.css|}" href="../../../../resources/stylesheets/layouts/layout.css"/>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- Navbar -->
        <th:block th:include="fragments/navbar :: navbar"/>

        <div class="container">
            <!-- Content -->
            <th:block layout:fragment="content"/>
        </div>

        <!-- Footer -->
        <th:block th:include="fragments/footer :: footer"/>

        <!-- <div class="bottom-right-container">
            <th:block th:include="fragments/debuginfo :: debuginfo"/>
        </div> -->

        <!-- JavaScripts -->
        <th:block th:switch="${applicationEnvironment}">
            <th:block th:case="'production'">
                <!-- Application -->
                <script th:src="@{|/static/javascripts/application.min.js|}" src="../../../resources/javascripts/application.min.js"></script>
            </th:block>
            <th:block th:case="*">
                <!-- jQuery -->
                <script th:src="@{|/static/javascripts/jquery.js|}" src="../../../jquery.js"></script>
                <!-- jQuery Pjax -->
                <script th:src="@{|/static/javascripts/jquery-pjax.js|}" src="../../../jquery-pjax.js"></script>
                <!-- jQuery Textchange -->
                <script th:src="@{|/static/javascripts/jquery-textchange.js|}" src="../../../jquery-textchange.js"></script>
                
                 <!-- Angular.JS -->
			    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
			
			
			    <script src="http://cdn.bootcss.com/datatables/1.10.12/js/jquery.dataTables.js"></script>
    
                <!-- KnockoutJS -->
                <script th:src="@{|/static/javascripts/knockout.js|}" src="../../../knockout.js"></script>
                <!-- KnockoutJS Editable -->
                <script th:src="@{|/static/javascripts/knockout-editable.js|}" src="../../../knockout-editable.js"></script>
                <!-- KnockoutJS Table  -->
                <script th:src="@{|/static/javascripts/knockout-table.js|}" src="../../../knockout-table.js"></script>
                <!-- KnockoutJS Validation  -->
                <script th:src="@{|/static/javascripts/knockout-validation.js|}" src="../../../knockout-validation.js"></script>
                <!-- UnderscoreJS -->
                <script th:src="@{|/static/javascripts/underscore.js|}" src="../../../underscore.js"></script>
                <!-- Underscore.stringJS -->
                <script th:src="@{|/static/javascripts/underscore.string.js|}" src="../../../underscore.string.js"></script>
                <!-- Bootstrap -->
                <script th:src="@{|/static/javascripts/bootstrap.js|}" src="../../../bootstrap.js"></script>
                <!-- Bootstrap Editable -->
                <script th:src="@{|/static/javascripts/bootstrap-editable.js|}" src="../../../bootstrap-editable.js"></script>
                <!-- Select2 -->
                <script th:src="@{|/static/javascripts/select2.js|}" src="../../../select2.js"></script>
                <!-- DataTables -->
                <script th:src="@{|/static/javascripts/datatables.js|}" src="../../../resources/javascripts/datatables.js"></script>
                <!-- DataTables Bootstrap -->
                <script th:src="@{|/static/javascripts/datatables-bootstrap.js|}" src="../../../resources/javascripts/datatables-bootstrap.js"></script>
                <!-- Cookies.js -->
                <script th:src="@{|/static/javascripts/cookies.js|}" src="../../../resources/javascripts/cookies.js"></script>

                <!-- Application Commons -->
                <script th:src="@{|/static/javascripts/application-commons.js|}" src="../../../resources/javascripts/application-commons.js"></script>
                <!-- Navbar -->
                <script th:src="@{|/static/javascripts/fragments/navbar.js|}" src="../../../resources/javascripts/fragments/navbar.js"></script>
            </th:block>
        </th:block>

        <!-- Page JavaScripts -->
        <th:block layout:fragment="javascripts"/>

    </body>
</html>
